<template>
	<div>
		<el-card class="box-card">
			<div class="Serach_b">
				<el-input type="input" autosize placeholder="请输入用户ID" v-model="fy.uid" @keyup.enter.native="seachEnter"
					style="width: 300px;margin-left: 20px;">
				</el-input>
				<el-date-picker v-model="fy.startTime" placeholder="请选择创建时间" type="date" value-format="yyyy-MM-dd">
				</el-date-picker>
				<el-button type="primary" icon="el-icon-search" @click="SearchData()">搜索</el-button>
				<!-- <el-button type="primary" @click="handleExport()">导出</el-button> -->
			</div>
			<el-table :data="CartList" border>
				<el-table-column prop="uid" label="用户ID" />
				<el-table-column prop="status" label="状态">
					<template slot-scope="scope">
						{{ scope.row.status | changeStatus }}
					</template>
				</el-table-column>
				<el-table-column prop="goodsName" label="商品" />
				<el-table-column prop="num" label="数量" />
				<el-table-column prop="totalAmount" label="总计金额" />
				<el-table-column prop="amount" label="消耗健康分" />
				<!-- <el-table-column prop="createTime" label="创建时间" /> -->
				<el-table-column prop="paymentTime" label="支付时间" />
				<el-table-column prop="accountRealname" label="姓名" />
				<el-table-column prop="crmMySelf" label="身份证号" />
				<el-table-column prop="bankPhone" label="电话" />
				<el-table-column prop="bankAccount" label="银行卡号" />
				<el-table-column prop="bankName" label="开户行" />
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="danger" size="mini" @click="DelClick(scope.row)">删除</el-button>
						<el-button v-if="scope.row.status == 1" type="warning" size="mini" @click="zz(scope.row)">转账
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[10, 15]"
				:page-size="fy.currentCount" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
			<el-dialog title="物流订单号" :visible.sync="dialogVisible3" width="30%" :before-close="handleClose1">
				<div class="margin">
					<label>地区：</label>{{form.localtion}}
				</div>
				<div class="margin">
					<label>所属银行：</label>{{form.subbranch}}
				</div>
				<div class="margin">
					<label>开户行：</label>{{form.bankName}}
				</div>
				<div class="margin">
					<label>收款人姓名：</label>{{ form.accountRealname }}
				</div>
				<div class="margin">
					<label>收款账号：</label>{{ form.bankAccount }}
				</div>
				<div class="margin">
					<label>收款手机号：</label>{{ form.bankPhone }}
				</div>
				<span slot="footer" class="dialog-footer">
					<el-button @click="dialogVisible3 = false">取消</el-button>
					<el-button type="primary" @click="GLYSH(1)">确 定 转 账</el-button>
				</span>
			</el-dialog>
		</el-card>
	</div>
</template>

<script>
	import * as syOrderApi from "@/api/Add";
	import * as StoreCartApi from "@/api/Search";
	import {
		timestampToTime
	} from "@/utils/date";
	export default {
		data() {
			return {
				createTime: [],
				dialogVisible3: false,
				timestampToTime,
				orderNo: 0,
				form: {},
				fy: {
					currentCount: 10,
					currentPage: 1,
				},
				total: 0,
				CartList: [],
			};
		},
		methods: {
			dateArrayTransfer(dateArray) {
				if (dateArray == null || dateArray == '') {
					return '无';
				}
				if (dateArray.length == 6) {
					var returnDate = dateArray[0] + "-" +
						this.returnDoubleNum(dateArray[1]) + "-" +
						this.returnDoubleNum(dateArray[2]) + " " +
						this.returnDoubleNum(dateArray[3]) + ":" +
						this.returnDoubleNum(dateArray[4]) + ":" +
						this.returnDoubleNum(dateArray[5]);
				} else {
					var returnDate = dateArray[0] + "-" +
						this.returnDoubleNum(dateArray[1]) + "-" +
						this.returnDoubleNum(dateArray[2]) + " " +
						this.returnDoubleNum(dateArray[3]) + ":" +
						this.returnDoubleNum(dateArray[4]) + ":00";
				}
				return returnDate;
			},
			returnDoubleNum(number) {
				return (Array(2).join(0) + number).slice(-2); //创建一个长度为2的数组，且默认用0填充；然后用传过来的数添加都右边，然后从右向左截取两位！
			},
			handleClose1() {
				this.dialogVisible3 = false;
			},
			zz(row) {
				syOrderApi
					.getMemberBank({
						memberId: Number(row.uid),
					})
					.then((res) => {
						if (res.code === 200) {
							this.dialogVisible3 = true;
							this.orderNo = row.orderNo;
							this.form = res.data;
						}
					});
			},
			GLYSH() {
				syOrderApi
					.SearchOrderDeliverGoods({
						orderNo: this.orderNo,
						logisticsOrderNum: "",
						token: this.$store.getters.token,
					})
					.then((res) => {
						if (res.data == true) {
							this.SearchData();
							this.$notify({
								title: "成功",
								message: "成功",
								type: "success",
							});
							this.dialogVisible3 = false;
						} else {
							this.$notify({
								title: "失败",
								message: "失败",
								type: "error",
							});
							this.dialogVisible3 = false;
						}
					});
			},
			DelClick(row) {
				this.$confirm("确认删除？")
					.then((_) => {
						syOrderApi.DelOrder({
							idList: row.id
						}).then((res) => {
							if (res.data == true) {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "成功",
									message: "删除成功",
									type: "success",
								});
							} else {
								this.dialogVisible = false;
								this.SearchData();
								this.$notify({
									title: "失败",
									message: "删除失败",
									type: "error",
								});
							}
						});
						done();
					})
					.catch((_) => {});
			},
			SearchData() {
				StoreCartApi.gethealthScoreArea({
					...this.fy
				}).then((res) => {
					this.total = res.data.totalRecord;
					this.CartList = res.data.list;
					this.CartList.map(item => {
						item.createTime = this.dateArrayTransfer(item.createTime)
						item.paymentTime = this.dateArrayTransfer(item.paymentTime)
					})
					// this.CartList.forEach((item) => {
					// 	item.createTime = this.parseTime(item.createTime);
					// 	item.paymentTime = this.parseTime(item.paymentTime);
					// });
				});
			},
			handleSizeChange(value) {
				this.fy.currentCount = value;
				this.SearchData();
			},
			handleCurrentChange(value) {
				this.fy.currentPage = value;
				this.SearchData();
			},
			handleExport() {

				StoreCartApi.gethealthScoreAreaExport({
					...this.fy
				}).then((res) => {
					import("@/vendor/Export2Excel").then((excel) => {
						// 设置导出表格的头部
						const tHeader = [
							"用户ID",
							"类型",
							"商品",
							"数量",
							"总计金额",
							"消耗健康分",
							"创建时间",
							"支付时间",
							"姓名",
							"电话",
							"银行卡号",
							"开户行",
						];
						// 设置要导出的属性
						const filterVal = [
							"uid",
							"status",
							"goodsName",
							"num",
							"totalAmount",
							"amount",
							"createTime",
							"paymentTime",
							"accountRealname",
							"bankPhone",
							"bankAccount",
							"bankName",
						];
						// 获取当前展示的表格数据
						const list = res.data.map((k) => {
							let val = k.status
							let status = ""
							if (val == 0) {
								status = "待付款";
							} else if (val == 1) {
								status = "待发货";
							} else if (val == 2) {
								status = "待收货";
							} else if (val == 3) {
								status = "待评价";
							} else if (val == 4) {
								status = "已完成";
							} else if (val == 5) {
								status = "已失效";
							} else if (val == 6) {
								status = "待审核";
							} else if (val == 7) {
								status = "部分退款";
							} else if (val == 8) {
								status = "已退款";
							} else {
								status = "拒收";
							}
							return {
								...k,
								status: status
							};
						});
						// 将要导出的数据进行一个过滤
						const data = this.formatJson(filterVal, list);
						// 调用我们封装好的方法进行导出Excel
						excel.export_json_to_excel({
							// 导出的头部
							header: tHeader,
							// 导出的内容
							data,
							// 导出的文件名称
							filename: "健康分专区",
							// 导出的表格宽度是否自动
							autoWidth: this.autoWidth,
							// 导出文件的后缀类型
							bookType: this.bookType,
						});
					});
				});
			},
			// 对要导出的内容进行过滤
			formatJson(filterVal, jsonData) {
				return jsonData.map((v) =>
					filterVal.map((j) => {
						if (j === "createTime") {
							return this.parseTime(v[j]);
						} else {
							return v[j];
						}
					})
				);
			},
			// 过滤时间
			parseTime(time, cFormat) {
				if (arguments.length === 0) {
					return null;
				}
				const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
				let date;
				if (typeof time === "object") {
					date = time;
				} else {
					if (typeof time === "string" && /^[0-9]+$/.test(time)) {
						time = parseInt(time);
					}
					if (typeof time === "number" && time.toString().length === 10) {
						time = time * 1000;
					}
					date = new Date(time);
				}
				const formatObj = {
					y: date.getFullYear(),
					m: date.getMonth() + 1,
					d: date.getDate(),
					h: date.getHours(),
					i: date.getMinutes(),
					s: date.getSeconds(),
					a: date.getDay(),
				};
				const timeStr = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
					let value = formatObj[key];
					// Note: getDay() returns 0 on Sunday
					if (key === "a") {
						return ["日", "一", "二", "三", "四", "五", "六"][value];
					}
					if (result.length > 0 && value < 10) {
						value = "0" + value;
					}
					return value || 0;
				});
				return timeStr;
			},
		},
		created() {
			this.SearchData();
		},
		filters: {
			changeStatus(val) {
				if (val == 0) {
					return "待付款";
				} else if (val == 1) {
					return "待发货";
				} else if (val == 2) {
					return "待收货";
				} else if (val == 3) {
					return "待评价";
				} else if (val == 4) {
					return "已完成";
				} else if (val == 5) {
					return "已失效";
				} else if (val == 6) {
					return "待审核";
				} else if (val == 7) {
					return "部分退款";
				} else if (val == 8) {
					return "已退款";
				} else {
					return "拒收";
				}
				return val;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.el-pagination {
		margin-top: 10px;
	}

	.box-card {
		width: 95%;
		margin: auto;
	}

	.Serach_b {
		display: flex;
		align-items: center;
		margin-bottom: 20px;
	}

	.Serach_b .el-button {
		margin-left: 20px;
	}

	.el-textarea {
		margin-left: 20px;
		width: 20%;
	}

	.el-input {
		margin-left: 20px;
	}

	.margin {
		line-height: 40px;
	}
</style>
